<!-- 全部简历 -->
<template>
  <div class="app-container">
    <el-row :span="24">
      <el-form :inline="false">
        <el-form-item>
          <span class="txtStyle">关键字:</span>
          <el-input
            v-model="dataList.searchForm.LoginName"
            auto-complete="off"
            placeholder="请输入关键字"
            class="valStyle"
            style="width:715px;"
          />
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">期望城市:</span>
          <template v-for="item in dataList.addressList">
            <el-button v-if="item != dataList.searchForm.Address" :key="item" :label="item" :value="item" @click="handleAddress(item)">{{ item }}</el-button>
            <el-button v-else :key="item" :label="item" :value="item" type="primary" @click="handleAddress(item)">{{ item }}</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">期望工资:</span>
          <template v-for="item in dataList.salaryList">
            <el-button v-if="item != dataList.searchForm.SalaryRange" :key="item" :label="item" :value="item" @click="handleSalaryRange(item)">{{ item }}</el-button>
            <el-button v-else :key="item" :label="item" :value="item" type="primary" @click="handleSalaryRange(item)">{{ item }}</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">求职状态:</span>
          <template v-for="item in dataList.jobStateList">
            <el-button v-if="item.value + '' != dataList.searchForm.JobState + ''" :key="item.label" :label="item.label" :value="item.value" @click="handleJobState(item.value)">{{ item.label }}</el-button>
            <el-button v-else :key="item.label" :label="item.label" :value="item.value" type="primary" @click="handleJobState(item.value)">{{ item.label }}</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">学历:</span>
          <template v-for="item in dataList.educationList">
            <el-button v-if="item != dataList.searchForm.Education" :key="item" :label="item" :value="item" @click="handleEducation(item)">{{ item }}</el-button>
            <el-button v-else :key="item" :label="item" :value="item" type="primary" @click="handleEducation(item)">{{ item }}</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">性别:</span>
          <template v-for="(item, i) in dataList.sexList">
            <el-button v-if="i != dataList.searchForm.Sex" :key="item" :label="item" :value="i" @click="handleSex(i)">{{ item }}</el-button>
            <el-button v-else :key="item" :label="item" :value="i" type="primary" @click="handleSex(i)">{{ item }}</el-button>
          </template>
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">工作年限:</span>
          <el-input
            v-model="dataList.searchForm.MinWorkHour"
            auto-complete="off"
            placeholder="最小"
            type="number"
            min="0"
            max="50"
            class="valnumberStyle"
          />—
          <el-input
            v-model="dataList.searchForm.MaxWorkHour"
            auto-complete="off"
            placeholder="最大"
            type="number"
            min="0"
            max="50"
            class="valnumberStyle"
          />
        </el-form-item>
        <el-form-item>
          <span class="txtStyle">年龄:</span>
          <el-input
            v-model="dataList.searchForm.MinAge"
            auto-complete="off"
            placeholder="最小"
            type="number"
            min="0"
            max="100"
            class="valnumberStyle"
          />—
          <el-input
            v-model="dataList.searchForm.MaxAge"
            auto-complete="off"
            placeholder="最大"
            type="number"
            min="0"
            max="100"
            class="valnumberStyle"
          />
          <el-button
            type="primary"
            icon="el-icon-search"
            class="btnStyle"
            @click="findList"
          >搜索</el-button>
          <el-button
            type="primary"
            class="btnStyle"
            @click="form.importState=true"
          >导 入</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      v-loading="dataList.listLoading"
      :data="dataList.list"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.UserName }}</template>
      </el-table-column>
      <el-table-column label="性别/年龄">
        <template slot-scope="scope">
          <span v-if="scope.row.Sex==0">未知</span>
          <span v-if="scope.row.Sex==1">男</span>
          <span v-if="scope.row.Sex==2">女</span>
          <span>/{{ scope.row.Age }}岁</span>
        </template>
      </el-table-column>
      <el-table-column label="学历">
        <template slot-scope="scope">{{ scope.row.Education }}</template>
      </el-table-column>
      <el-table-column label="毕业院校">
        <template slot-scope="scope">{{ scope.row.School }}</template>
      </el-table-column>
      <el-table-column label="最近登录时间">
        <template v-if="scope.row.LoginTime !== '1753-01-1 0:0:0'" slot-scope="scope">
          {{ scope.row.LoginTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <el-button type="primary" @click="loadForm({Id: scope.row.Id, Type: 1})">查看</el-button>
          <el-button v-if="scope.row.IsImport === 1" type="primary" @click="remove(scope.row.Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="dataList.searchForm.pageIndex"
      :page-count="dataList.searchForm.pageCount"
      :hide-on-single-page="true"
      @current-change="currentPageChange"
    />

    <el-dialog
      title="简历信息"
      :visible.sync="form.formState"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-position="left" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="19" :offset="1">
            <h2>{{ form.model.UserName }}</h2>
            <h3>个人信息：</h3><hr>
            <el-row :gutter="20" class="rowStyleContent">
              <el-col :span="6">
                <span>出生年月</span>
                <span class="splitWidth">|</span>
                <span>{{ form.model.BirthTime }}</span>
              </el-col>
              <el-col :span="9">
                <span>性别</span>
                <span class="splitWidth">|</span>
                <span v-if="form.model.Sex==0">未知</span>
                <span v-if="form.model.Sex==1">男</span>
                <span v-if="form.model.Sex==2">女</span>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowStyleContent">
              <el-col :span="6">
                <span>手机号</span>
                <span class="splitWidth">|</span>
                <span>{{ form.model.Phone }}</span>
              </el-col>
              <el-col v-if="form.model.Email" :span="9">
                <span>邮箱</span>
                <span class="splitWidth">|</span>
                <span>{{ form.model.Email }}</span>
              </el-col>
              <el-col v-if="form.model.PoliticsStatus" :span="6">
                <span>政治面貌</span>
                <span class="splitWidth">|</span>
                <span>{{ form.model.PoliticsStatus }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="form.model.JobExpectations&&form.model.JobExpectations.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>求职期望：</h3><hr>
            <template v-for="item in form.model.JobExpectations">
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col :span="6">
                  <span>期望工作地</span>
                  <span class="splitWidth">|</span>
                  <span>{{ item.Address }}</span>
                </el-col>
                <el-col :span="6">
                  <span>求职岗位</span>
                  <span class="splitWidth">|</span>
                  <span>{{ item.JobName }}</span>
                </el-col>
                <el-col :span="6">
                  <span>期望工资</span>
                  <span class="splitWidth">|</span>
                  <span>{{ item.SalaryRange }}</span>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.EducationExperience&&form.model.EducationExperience.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>教育背景：</h3><hr>
            <template v-for="item in form.model.EducationExperience">
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col :span="6">
                  <template>{{ item.SchoolStart.slice(0,7) }} — {{ item.SchoolEnd.slice(0,7) }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.SchoolName }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.Speciality }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.Education }}</template>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.SelfEvaluate" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>自我评价：</h3><hr>
            <el-row :gutter="20" class="rowStyleContent">
              <el-col>
                <span class="spaceStyle">{{ form.model.SelfEvaluate }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="form.model.WorkExperience&&form.model.WorkExperience.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>实习经历：</h3><hr>
            <template v-for="item in form.model.WorkExperience">
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col :span="6">
                  <template>{{ item.WorkStart.slice(0,7) }} — {{ item.WorkEnd.slice(0,7) }}</template>
                </el-col>
                <el-col :span="9">
                  <template>{{ item.WorkName }}</template>
                </el-col>
                <el-col :span="9">
                  <template>{{ item.JobName }}</template>
                </el-col>
              </el-row>
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col>
                  <div>工作内容：</div>
                  <span class="spaceStyle">{{ item.WorkContent }}</span>
                </el-col>
              </el-row>
              <el-row v-if="item.Harvest" :key="item.id" :gutter="20">
                <el-col>
                  <p>成长收获：</p>
                  <span class="spaceStyle">{{ item.Harvest }}</span>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.ScientificExperienceList&&form.model.ScientificExperienceList.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>科研经历：</h3><hr>
            <template v-for="item in form.model.ScientificExperienceList">
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col>
                  <span>课题时间：</span>
                  <template>{{ item.ScientificStart.slice(0,7) }} — {{ item.ScientificEnd.slice(0,7) }}</template>
                </el-col>
              </el-row>
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col>
                  <span>课题名称：</span>
                  <template>{{ item.ScientificName }}</template>
                </el-col>
              </el-row>
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col>
                  <span>课题描述：</span>
                  <template>{{ item.ScientificContent }}</template>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.ProjectExperience&&form.model.ProjectExperience.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>校园经历：</h3><hr>
            <template v-for="item in form.model.ProjectExperience">
              <el-row :key="item.id" :gutter="20" class="rowStyleContent">
                <el-col :span="6">
                  <template>{{ item.ProjectStart.slice(0,7) }} — {{ item.ProjectEnd.slice(0,7) }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.ProjectName }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.Department }}</template>
                </el-col>
                <el-col :span="6">
                  <template>{{ item.ProjectRole }}</template>
                </el-col>
              </el-row>
              <el-row :key="item.id" :gutter="20">
                <el-col>
                  <span class="spaceStyle">{{ item.ProjectRemark }}</span>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.SelfSkillList&&form.model.SelfSkillList.length>0" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>个人技能：</h3><hr>
            <template v-for="item in form.model.SelfSkillList">
              <el-row :key="item.id" :gutter="20">
                <el-col :span="19">
                  <template>{{ item.SkillName }}—</template>
                  <template>{{ item.SkillLevel }}</template>
                </el-col>
              </el-row>
            </template>
          </el-col>
        </el-row>
        <el-row v-if="form.model.Interests" :gutter="20">
          <el-col :span="19" :offset="1">
            <h3>兴趣爱好：</h3><hr>
            <el-row :gutter="20" class="rowStyleContent">
              <el-col :span="19">
                <template>{{ form.model.Interests }}</template>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="!form.model.IsCollect" type="primary" @click="resumeCollect({Id: form.model.Id, type: 0})">收藏</el-button>
        <el-button v-else type="primary" @click="resumeCollect({Id: form.model.Id, type: 1})">取消收藏</el-button>
        <el-button type="primary" @click="handleDownload()"> 下 载 </el-button>
        <el-button @click="form.formState = false"> 取 消 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="导入简历"
      :visible.sync="form.importState"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-position="left" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="19" :offset="1" class="rowStyle">
            <el-form-item label="文件">
              <el-upload
                :action="$store.state.settings.fileImportUrl"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handleSuccess"
                :data="{ parameter: 'HeaderImage' }"
                drag
              >
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过8MB</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

// import Tinymce from '@/components/Tinymce'
const _controllerName = 'resumeAll'
const _vuexNamespace = 'resume/resumeAll'

export default {
  name: _controllerName,
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
    getJobStateText(jobState) {
      var array = [
        {
          value: '1',
          label: '立即到岗'
        },
        {
          value: '2',
          label: '一个月到岗'
        },
        {
          value: '3',
          label: '三个月到岗'
        },
        {
          value: '4',
          label: '六个月到岗'
        }]
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        if (element.value === jobState + '') {
          return element.label
        }
      }
      return ''
    }
  },
  components: {
    // add
    // Tinymce
  },
  data() {
    return {
      listLoading: true,
      regionDataOptions: regionData,
      CodeToText: CodeToText,
      TextToCode: TextToCode
    }
  },
  computed: {
    ...mapState(_vuexNamespace, {
      dataList: state => state.dataList,
      form: state => state.form
    })
  },
  created() {
    this.findList()
    this.$set(this.form, 'TextToCode', TextToCode)
  },
  methods: {
    // 获取数据
    ...mapActions(_vuexNamespace, {
      loadNewForm: 'loadNewForm',
      // 查询列表
      findList: 'findList',
      // 加载表单
      loadForm: 'loadForm',
      // 保存表单数据
      save: 'save',
      // 移除数据
      remove: 'delete',
      // loadTree: 'loadTree',
      handleSuccess: 'handleSuccess',
      handleNodeClick: 'handleNodeClick',
      checkedDepartment: 'checkedDepartment',
      handleSalaryRange: 'handleSalaryRange',
      handleAddress: 'handleAddress',
      handleEducation: 'handleEducation',
      handleJobState: 'handleJobState',
      handleSex: 'handleSex',
      resumeCollect: 'resumeCollect',
      handleDownload: 'handleDownload'
    }),
    // 状态管理事件
    ...mapMutations(_vuexNamespace, {
      // 勾选复选框改变事件
      selectionChange: 'selectionChange',
      // 重置检索文本框
      resetSearch: 'resetSearch',
      // 分页下拉框行数改变
      sizeChange: 'sizeChange',

      // 翻页
      currentPageChange: 'currentPageChange'

    }),
    ProvinceHandleChange(v) {
      this.form.model.Province = CodeToText[v[0]]

      this.$set(this.form.model, 'Province', CodeToText[v[0]])
      this.$set(this.form.model, 'City', CodeToText[v[1]])
      this.$set(this.form.model, 'District', CodeToText[v[2]])


      console.log(this.form.model.Province)
      // City: null
      // Province
      // District
      console.log('ProvinceHandleChange', v, CodeToText[v[2]])
    }
  }
}
</script>
<style scoped>
.image {
  width: 148px;
  height: 148px;
}
.txtStyle{
  display: inline-block;
  width: 150px;
  text-align: right;
  margin-right: 10px;
}
.valStyle{
  /* display: inline-block; */
  width: 250px;
}
.btnStyle{
  margin-left: 10px;
  /* background-color: #3a8ee6;
  color: #FFF; */
}
.btnStyle-click{
  margin-left: 10px;
  background-color: #3a8ee6;
  color: #FFF;
}
.valnumberStyle{
  width: 114px;
}
.splitWidth{
  display: inline-block;
  margin: 0 10px;
}
.rowStyle{
  margin-bottom: 20px;
}
.keywordStyle{
  width: 286%;
}
.rowStyleContent{
  margin-bottom: 10px;
}
.spaceStyle{
  white-space: pre-line;
}
</style>
